// miniprogram/pages/deviceControl/PM2.5/index.js
import uCharts from '../../../libs/u-charts.js';
var _self;
var canvaLineA = null;

Page({

  /**
   * 页面的初始数据
   */
  data: {
    cWidth: '',
    cHeight: '',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    _self=this;
    this.cWidth = wx.getSystemInfoSync().windowWidth;
    this.cHeight = 400 / 700 * wx.getSystemInfoSync().windowWidth;
    this.getServerData();
    wx.setNavigationBarTitle({
      title: '空气质量检测仪'
    })
    console.log(uCharts);
  },

  getServerData:function(){
    let LineA = { categories: ['8:00','9:00','10:00','11:00','12:00','13:00'], series: [
      {name: "PM2.5", data: [27, 22, 25, 31, 32, 26], color: "#1890FF", linearIndex: 0, index: 0 },
      {name: "PM10", data: [28, 27, 28, 30, 28, 28], color: "#91CB74", linearIndex: 1, index: 0 },
      {name: "PM1.0", data: [22, 24, 22, 23, 22, 24], color: "#FAC858", linearIndex: 2, index: 0 }
    ] };
     _self.showLineA("canvasLineA", LineA);
  },
  showLineA(canvasId, chartData) {
    let ctx = wx.createCanvasContext(canvasId, this);
    canvaLineA = new uCharts({
      type: 'line',
      context: ctx,
      fontSize: 11,
      legend: true,
      dataLabel: true,
      dataPointShape: true,
      background: '#FFFFFF',
      pixelRatio: 1,
      categories: chartData.categories,
      series: chartData.series,
      animation: true,
      enableScroll: true,//开启图表拖拽功能
      xAxis: {
        disableGrid: false,
        type: 'grid',
        gridType: 'dash',
        itemCount: 4,
        scrollShow: true,
        scrollAlign: 'left',
        //scrollBackgroundColor:'#F7F7FF',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条背景颜色,默认为 #EFEBEF
        //scrollColor:'#DEE7F7',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条颜色,默认为 #A6A6A6
      },
      yAxis: {
        //disabled:true
        gridType: 'dash',
        splitNumber: 10,
        min: 0,
        max: 40,
        formatter: (val) => { return val.toFixed(0) }//如不写此方法，Y轴刻度默认保留两位小数
      },
      width: _self.cWidth,
      height: _self.cHeight,
      extra: {
        line: {
          type: 'straight'
        }
      },
    });

  },
  touchLineA(e) {
    canvaLineA.scrollStart(e);
  },
  moveLineA(e) {
    canvaLineA.scroll(e);
  },
  touchEndLineA(e) {
    canvaLineA.scrollEnd(e);
    //下面是toolTip事件，如果滚动后不需要显示，可不填写
    canvaLineA.showToolTip(e, {
      formatter: function (item, category) {
        return category + ' ' + item.name + ':' + item.data
      }
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})